<template>
  <div id="container">
  <!-- 此处放置el-tabs代码 -->
      <el-tabs
          v-model="activeIndex"
          type="border-card" closable
          v-if="openTab.length"
          @tab-change='tabClick'
          @tab-remove='tabRemove'
      >
      <el-tab-pane :key="item.name" v-for="item in openTab" :label="item.name" :name="item.route">
      </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  data() {
    return {
      $store: useStore(),
    };
  },

  components: {

  },

  created() {

  },
  methods: {
    // tab标签点击时，切换相应的路由
    tabClick(tab:string) {
      console.log(333, tab);
      console.log('active', this.activeIndex);
      this.$router.push({ path: this.activeIndex });
    },
    // 移除tab标签
    tabRemove(targetName:any) {
      console.log('tabRemove', targetName);
      // 首页不删
      if (targetName === '/' || targetName === '/index') {
        return;
      }
      this.$store.commit('delete_tabs', targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.openTab && this.openTab.length >= 1) {
          console.log('=============', this.openTab[this.openTab.length - 1].route);
          this.$store.commit('set_active_index', this.openTab[this.openTab.length - 1].route);
          this.$router.push({ path: this.activeIndex });
        } else {
          this.$router.push({ path: '/' });
        }
      }
    },
  },
  mounted() {
    // 页面刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
    // 当当前路由是首页时，添加首页到store，并设置激活状态
    if (this.$route.path !== '/' && this.$route.path !== '/index') {
      // this.$store.commit('add_tabs', {route: '/index' , name: '首页'});
      // this.$store.commit('add_tabs', {route: this.$route.path , name: this.$route.name });
      this.$store.commit('set_active_index', this.$route.path);
    } else {
      this.$store.commit('delete_tabs', '/index');
      this.$store.commit('add_tabs', { route: '/index', name: '首页' });
      this.$store.commit('set_active_index', '首页');
      this.$router.push('/');
    }
  },
  computed: {
    openTab() {
      return this.$store.state.openTab;
    },
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val:string) {
        this.$store.commit('set_active_index', val);
      },
    },
  },
  watch: {
    $route(to, from) {
      // 判断路由是否已经打开
      // 已经打开的 ，将其置为active
      // 未打开的，将其放入队列里
      let flag = false;
      for (let item of this.openTab) {
        console.log('item.name', item.name);
        console.log('t0.name', to.name);

        if (item.name === to.name) {
          console.log('to.path', to.path);
          this.$store.commit('set_active_index', to.path);
          flag = true;
          break;
        }
      }

      if (!flag) {
        console.log('to.path', to.path);
        this.$store.commit('add_tabs', { route: to.path, name: to.name });
        this.$store.commit('set_active_index', to.path);
      }
    },
  },

});
</script>

<style scoped lang='scss'>
* {
  box-sizing: border-box;
}

//默认初始样式
html,
body,
#app {
  height: 100%;
  min-width: 1225px;
  overflow-x: hidden;
  background: #ededed;
}
::v-deep .el-tabs--border-card>.el-tabs__content{
  padding: 0;
  margin: 0;
}
#container{
  height: 60px;
  ::v-deep .el-tabs__item{
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  }
}
</style>
